<template>
  <tbody>
    <tr v-for="l in list" :key="l.productId">
      <td><input type="Checkbox" /></td>
      <td>
        <div class="info">
          <img :src="l.productUrl" />
          <span class="name">{{ l.productName }}</span>
          <span class="spec">
            <p v-if="l.spec['选择颜色']">{{ l.spec['选择颜色'] }}</p>
            <p v-if="l.spec['选择容量']">{{ l.spec['选择容量'] }}</p>
          </span>
        </div>
      </td>
      <td>{{ '¥' + l.productPrice.toFixed(2) }}</td>
      <td>
        <div class="num">
          <button
            @click="edit(l.id, l.goodsNum - 1)"
            :disabled="l.goodsNum <= 1"
          >
            -
          </button>
          <p>{{ l.goodsNum }}</p>
          <button @click="edit(l.id, l.goodsNum + 1)">+</button>
        </div>
      </td>
      <td>{{ '¥' + (l.productPrice * l.goodsNum).toFixed(2) }}</td>
      <td>
        <a @click="del(l.id)">删除</a>
      </td>
    </tr>
  </tbody>
</template>

<script>
import { GetDel } from '@/api/deleteid'
import { GetEditCart } from '@/api/editcart'
export default {
  props: ['ret'],
  data() {
    return {
      list: this.ret.list.map((item) => ({
        ...item,
        spec: typeof item.spec === 'string' ? JSON.parse(item.spec) : item.spec
      }))
    }
  },
  methods: {
    async edit(id, num) {
      //1.更新本地数据
      const item = this.list.find((item) => item.id === id)
      if (item) {
        item.goodsNum = num
      }
      // 2. 再调用接口同步到服务器
      try {
        let result = await GetEditCart(id, num)
        if (result.code !== 200) {
          // 接口失败时回滚本地数据
          item.goodsNum = num + (num > item.goodsNum ? -1 : 1)
          console.error('更新失败')
        }
        console.log(result)
      } catch (error) {
        // 网络错误时回滚
        item.goodsNum = num + (num > item.goodsNum ? -1 : 1)
        console.error('请求失败', error)
      }
    },
    async del(id) {
      // 1. 保存当前列表用于回滚
      const originalList = [...this.list]
      // 2. 先从本地列表中移除该商品（即时反馈）
      this.list = this.list.filter((item) => item.id !== id)

      try {
        const result = await GetDel(id)
        if (result.code !== 200) {
          // 接口失败时回滚本地数据
          this.list = originalList
          console.error('删除失败')
        } else {
          // 成功后通知父组件刷新（可选，根据需求）
          this.$emit('refresh-cart')
          console.log(result)
        }
      } catch (error) {
        // 网络错误时回滚
        this.list = originalList
        console.error('删除请求失败', error)
      }
    }
  }
}
</script>

<style scoped>
tr {
  text-align: center;
  /* border: 1px solid #000; */
}
tr td:nth-child(2) {
  width: 50%;
}
td div {
  display: flex;
  /* border: 1px solid #000; */
}
td div.info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
td div.info img {
  width: 20%;
  /* border: 1px solid #000; */
}
td div.info span.name {
  width: 60%;
  /* border: 1px solid #000; */
}
td div.info span.spec {
  width: 20%;
  display: flex;
  flex-direction: column;
  /* border: 1px solid #000; */
}
td div.num {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* border: 1px solid #000; */
}
td div.num button {
  width: 33%;
  font-size: 20px;
  cursor: pointer;
  border: 1px solid #adadad;
}
td div.num p {
  width: 33%;
  font-size: 18px;
  border: 1px solid #adadad;
}
</style>
